<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>订单详情</title>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        .col-md-4{padding: 0px !important; background-color: #fbfbfb;}
        .infoTitle {
            background-color: #fbfbfb;
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #dddddd;
            }
            .infoTitle h5{margin: 0px 10px;;
            height: 50px;
            line-height: 50px;}
            .infoContent {width: 650px;
            height: 150px;
           margin: 0 auto;
           border-bottom: 1px dotted #dddddd;
            }
            .infoContent ul{
                padding: 10px 0px;
                list-style-type: none;
            }
            .infoContent ul li{padding: 10px 0px;
            }
            .infoOther{width: 700px;height: 100px;margin: 0 auto;}
            .infoOther p{margin: 15px 0px;}
            .moreInfo{width: 700px;height: 80px;border: 1px solid #dddddd;background-color: #dddddd;display: none;}
            .moreInfo ul li{
                list-style-type: none;
                padding:  10px 0px;
            }
            .orderState{
                width: 850px;
                height: 70px;
                margin: 0 auto;
                border-bottom: 1px dotted #dddddd;
            }
            .orderState p{font-size: 18px;padding: 20px;color: #000;}
            .orderState p span{height: 30px;line-height: 30px;}
            .glyphicon-ok-circle::before{
                color: #06b30f;
                 padding: 0px 5px;
                font-size: 24px;
            }
            .orderCue {width: 850px;margin: 0 auto;}
            .orderCue ol li{
                padding: 10px;
            }
            tr th{font-weight: normal;color: #999999;text-align: center;}
           .goodsInfo ul{list-style-type: none;}
           .commision{background-color: #ffc;color: #c96;}
           .center td{text-align: center;}
         .step{width: 98%;position: relative;height: 100px;}
         .pathall{position: absolute;width: 81%;height: 20%;background-color: #dddddd;top:66%;left:9%;}
       .stepDiv{position: relative; width:90%;top:38%;left:5%;}
        .divBox{position: absolute;z-index: 999;width: 47px;height: 47px}
        .stepSuccess{width: 42px;height: 42px;border: 5px solid #dddddd;background-color: #dddddd;border-radius: 21px;}
         .step div{display: inline-block;}
        .divBox span{color: #06b30f;font-size: 16px;width:250%;margin-left: -15px;float: left;position: absolute;top: -43%;left: -12%; }
        .greenColor {background-color:#06b30f; }
        .goodsImg{width: 70px;height: 70px;}
       .goodsInfo ul li{display: inline-block;}
       .modal-backdrop{opacity: 0 !important;}
        .modal-conent{background-color: #ffffff;}
        .modal-body form{width: 200px;margin: 0 auto;}
       .from-group ul li input{text-align: left;}
       .from-group label{padding-left: 20px;}
       ul li{list-style-type: none;}
       .btn-danger,.btn-danger:focus{background-color: #ffffff;border: none;color: #ff0000;}
       .glyphicon-off{color: #f17612;}
       .orderCue p{margin: 20px; font-size: 14px;}
       .orderCue p span{color: #f17612;padding: 0 5px;}
       .myHide{display: none;}
       .orLogInfo{background-color:#F3FAFE ;}
       .orLogInfo td{position: relative;}
       .orLogInfo span{padding: 0px 20px;}
       .logisticInfo{width: 500px;border: 1px solid #dddddd;background-color: #fbfbfb;position: absolute;display: none;}
       .more3{float: right;}
       .deliverPrant{position: relative;}
       .deliverInfo{width: 300px;height: 100px;border: 1px solid #dddddd;background-color:#fbfbfb;display: none;position: absolute;right: 10px;}
       .deliverInfo ul{margin-left: -24px;margin-top: 5px;}
    </style>
</head>
<body>
        <div class="configNav"></div>
        <!-- content -->
        <div class="container-fluid">
            <div class="row">
                <!-- left -->
                <div class="col-md-2">
                    <div class="list-group">
                        <a href="order_index.html" class="list-group-item active">交易订单</a>
                        <a href="deliver_index.html" class="list-group-item ">发货</a>
                        <a href="address.html" class="list-group-item ">发货设置</a>
                        <a href="evaluate_admin.html" class="list-group-item ">评价管理</a>
                    </div>
                </div>
                    <!-- right -->
                <div class="col-md-10">
                        <ol class="breadcrumb">
                            <li><a href="">商家管理中心</a></li>
                            <li><a href="">订单物流</a></li>
                            <li class="active"><a href="">发货</a></li>
                        </ol>
                        <div id="orderdetail">
                        </div>
                        </div>
            </div>
        </div>

        <script src="../../js/jquery.min.js" charset="utf-8"></script>
        <script src="../../js/bootstrap.min.js" charset="utf-8"></script>
        <script src="../../plugin/layer/layer.js" charset="utf-8"></script>
        <script src="../../plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js" charset="utf-8"></script>
        <script src="../../plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="utf-8"></script>
        <script src="../../plugin/wangEditor/release/wangEditor.min.js" charset="utf-8"></script>
        <script src="../../js/nav.js" charset="utf-8"></script>
        <script src="../../js/common.js" charset="utf-8"></script>
        <script src="../../js/bootstrap-paginator.js" charset="utf-8"></script>
        <script src="../../js/ajax.js" charset="utf-8"></script>
        <script>
            $(document).ready(function(){
                orderdetail()
            })
            var orderDetailId = window.location.href .split('=')[1];//订单id
            //数据渲染
             function orderdetail (){
                 var pageUrls=cncbk_common_tools.serverURL + '/business/order/orderDetail';
                 data={'orderDetailId':orderDetailId}
                 var funs = function (res){
                     $('#orderdetail').empty();
                     var html ='',logappend=false;
                     for (var i = 0; i < res.data.list.length; i++) {
                         var orderStatus = '',orderCue = '',orderStateSpanI='glyphicon-ok-circle',hide='',stepTime='',payTime='',deliverTime='',successTime='',explanTime='',colors1='',colors2='',colors3='',colors4='',colors5='',removerOr='',logisitcs='',hideDeliver='';
                        switch(Number(res.data.list[0].orderStatus)){
                            case 1:
                            orderStatus = '订单已经提交，等待买家付款';

                            colors1='greenColor';
                            orderCue = '<div class="orderCue"><ol class="orderPrompt"><li><span>买家尚未对该订单进行支付</span></li><li><span>如果如果买家未对该笔订单进行支付操作，系统将于<span style="color:rgb(196, 132, 132);padding:0px 5px;">'+ res.data.list[i].closeTime+'</span>自动关闭该订单。</span></li></ol></div>';
                            hideDeliver = 'myHide';
                            break;
                            case 2:
                            orderStatus = '支付已成功';

                            colors1=colors2='greenColor';
                            orderCue = '<div class="orderCue"><ol class="orderPrompt"><li><span>买家已使用“<span>'+res.data.list[i].pamentCode +'</span>”方式成功对订单进行支付，支付单号 “<span>'+res.data.list[i].pamentCode +'</span>”。</span></li><li><span>订单已提交商家进行备货发货准备。</span></li></ol></div>';
                            removerOr = 'myHide';
                            break;
                            case 3:
                            orderStatus = '已发货';
                            colors1=colors2=colors3='greenColor';
                            removerOr = 'myHide';
                            hideDeliver = 'myHide';
                            logappend=true;
                            logisitcs = '<tr class="orLogInfo"></tr>';
                            orderCue = '<div class="orderCue"><ol class="orderPrompt"><li><span>商品已发出,物流公司“<span>'+ res.data.expressCompany+'</span>”；单号 “<span>'+ res.data.expressNumber+'</span>”。查看<a href="#logisticsTRack">"物流跟踪"</a>情况。</span></li><li><span>如果买家没有及时进行收货，系统将于<span style="color:rgb(196, 132, 132);padding:0px 5px;">'+ res.data.list[i].autoTime+'</span>自动完成“确认收货”，完成交易。</span></li></ol></div>';
                            break;
                            case 4:
                            orderStatus = '已收货';
                            colors1=colors2=colors3=colors4='greenColor';
                            removerOr = 'myHide';
                            hideDeliver = 'myHide';
                            logappend=true;
                            logisitcs = '<tr class="orLogInfo"></tr>';
                            orderCue = '<div class="orderCue"><ol class="orderPrompt"><li><span>交易已完成，买家可以对购买的商品及服务进行评价。</span></li><li><span>评级后的情况会在商品详情页面中显示，以供其他会员在购买时参考。</span></li></ol></div>';
                            break;
                            case 5:
                            orderStatus = '待评价';
                            colors1=colors2=colors3=colors4='greenColor';
                            removerOr = 'myHide';
                            hideDeliver = 'myHide';
                            break;
                            case 6:
                            orderStatus = '评价完成';
                            colors1=colors2=colors3=colors4=colors5='greenColor';
                            logappend=true;
                            logisitcs = '<tr class="orLogInfo"></tr>';
                            orderCue = '<div class="orderCue"></div>';
                            removerOr = 'myHide';
                            hideDeliver = 'myHide';
                            break;
                            case 7:
                            orderStatus = '关闭交易';
                            orderStateSpanI = 'glyphicon-off';
                            removerOr = 'myHide';
                            hideDeliver = 'myHide';
                            orderCue = '<div class="orderCue"><p>商家 于<span >2017-3-5 12:33:44</span>取消了订单</p></div>';
                            hide='hide';
                            break;
                            case 8:
                            orderStatus = '退款';
                            removerOr = 'myHide';
                            hideDeliver = 'myHide';
                            hide='myHide';
                            orderStateSpanI = 'glyphicon-off';
                            break;
                            case 9:
                            orderStatus = '拒收';
                            removerOr = 'myHide';
                            hideDeliver = 'myHide';
                            hide='myHide';
                            orderStateSpanI = 'glyphicon-off';
                            break;
                            case 10:
                            orderStatus = '延迟收货';

                            orderStateSpanI = 'glyphicon-off';
                            removerOr = 'myHide';
                            hideDeliver = 'myHide';

                            colors1=colors2=colors3='greenColor';
                            break;
                        }
                        var orderAmountYuan='';var orderAmountTicket='';
                        var orderAmount = res.data.list[i].orderAmount;
						  var goodsPrice = res.data.list[i].goodsPrice;
			              var isSpe = res.data.list[i].isSpe;
			                	var nuit='';
			                	if (isSpe == 1){
			                		nuit='券';
			                		goodsPriceUnit='<span>' + goodsPrice + nuit + '</span>';
			                		orderAmountYuan=res.data.list[i].goodsFreight;
			                		orderAmountTicket = orderAmount;
			                		
			                	}if (isSpe ==0) {
			                		nuit='元';
			                		goodsPriceUnit='<span>' + goodsPrice + nuit + '</span>';
			                		orderAmountYuan=res.data.list[i].goodsAmount;;
			                		orderAmountTicket = '0';
			                	}
                        html+='<table class="table table-bordered">'+
                            '<tbody>'+
                            '<tr>'+
                            '<td class="col-md-4">'+
                            '<div class="infoTitle">'+
                            '<h5>订单信息</h5>'+
                            '</div>'+
                            '<div class="infoContent">'+
                            '<ul>'+
                            '<li>收货人：<span>'+ res.data.orderReciver.name+res.data.orderReciver.phone+res.data.orderReciver.addressName+res.data.orderReciver.address+' </span></li>'+
                            '<li>发票：<span></span></li>'+
                            '<li>买家留言：<span></span></li>'+
                            '</ul>'+
                            '</div>'+
                            '<div class="infoOther">'+
                            '<p>'+
                            '<span>订单编号：'+ res.data.list[i].orderSn+'</span>'+
                            '<span style="float:right;" class="more1">更多<i class="glyphicon glyphicon-chevron-down"></i></span>'+
                            '</p>'+
                            '<div class="moreInfo">'+
                            '<ul>'+
                            '<li>支付方式：'+res.data.list[i].paymentCode +'</li>'+
                            '<li>下单时间：'+res.data.list[i].orderTime +'</li>'+
                            '</ul>'+
                            '</div>'+
                            '</div>'+
                            '</td>'+
                            '<td class="col-md-5">'+
                            '<div class="orderState">'+
                            '<p> <span><i class="glyphicon '+orderStateSpanI+'"></i></span>订单状态：<span class="orderStatus">'+orderStatus+'</span></p>'+
                            '</div>'+
                            orderCue+
                            '</td>'+
                            '</tr>'+
                            '</tbody>'+
                            '</table>'+
                            '<table class="table table-bordered">'+
                            '<tbody>'+
                            '<tr>'+
                            '<td>发货备注：<span>'+res.data.list[i].deliverBz+'</span></td>'+
                            '</tr>'+
                            '</tbody>'+
                            '</table>'+
                                        '<div class="step '+hide+' ">'+
											'<div class="pathall"></div>'+
											'<div class="stepDiv" >'+
											'<div class="divBox " style="left:3%;top:38%;">'+
											'<span>提交订单</span>'+
											'<div class="stepSuccess  '+colors1+'"></div>'+
											'</div>'+
											'<div class="divBox  " style="left:25%;top:38%;">'+
											'<span>支付订单</span>'+
											'<div class="stepSuccess '+colors2+'"></div>'+
											'</div>'+
											'<div class="divBox " style="left:48%;top:38%;">'+
											'<span>商家发货</span>'+
											'<div class="stepSuccess '+colors3+' "></div>'+
											'</div>'+
											'<div class="divBox " style="left:72%;top:38%;">'+
											'<span>确认收货</span>'+
											'<div class="stepSuccess '+colors4+' "></div>'+
											'</div>'+
											'<div class="divBox " style="left:93%;top:38%;">'+
											'<span>评价</span>'+
											'<div class="stepSuccess '+colors5+' "></div>'+
											'</div>'+
											'</div>'+
										'</div>'+
                            '<table class="table table-bordered">'+
                            '<thead>'+
                            '<tr>'+
                            '<th class="col-md-5">商品</th>'+
                            '<th>单价</th>'+
                            '<th>数量</th>'+
                            '<th>优惠活动</th>'+
                            '<th class="col-md-2"> 实付*佣金比=应付佣金（元）</th>'+
                            '<th>交易操作</th>'+
                            '</tr>'+
                            '</thead>'+
                            '<tbody>'+
                            logisitcs+
                            '<tr class="center">'+
                            '<td class="goodsInfo">'+
                            '<ul style="text-align:left; ">'+
                            '<li><img class="goodsImg" src="http://axyhpic.oss-cn-zhangjiakou.aliyuncs.com/'+res.data.list[i].goodsImage +'" alt=""></li>'+
                            '<li><a href="http://47.92.118.122/html/wytx/goods_particulars.html?id='+res.data.list[i].goodsId +'">'+res.data.list[i].goodsName +'</a></li>'+
                            '</ul>'+
                            '</td>'+
                            '<td><span>'+goodsPriceUnit +'</span></td>'+
                            '<td><span>'+res.data.list[i].goodsQuantity +'</span></td>'+
                            '<td ><span></span></td>'+
                            '<td class="commision"></td>'+
                            '<td>'+
                            '<a href="javascript:;" class="statusDis" >'+res.data.list[i].orderStatus +'</a><br>'+
                            '<button class="btn btn-danger removeOrder  '+ removerOr +'" data-toggle="modal" data-target="#removeorder" orderDetailId="'+res.data.list[i].orderDetailId+'">取消订单</button>'+
                            '<button class="btn-revise jump '+hideDeliver+'"  orderDetailId="'+orderDetailId+'"> <i class="glyphicon glyphicon-plane"></i>设置发货</button>'+
                            '<div class="modal fade" id="removeorder" aria-labelledby="modaladdress" aria-hiddden="true">'+
                            '<div class="modal-dialog">'+
                            '<div class="modal-conent">'+
                            '<div class="modal-header">'+
                            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>'+
                            '<h4 class="modal-title" id="modaladdress">取消订单</h4>'+
                            '</div>'+
                            '<div class="modal-body">'+
                            '<form role="form">'+
                            '<div class="form-group">'+
                            '<div class="reason">订单编号：<span>'+res.data.list[i].orderSn+'</span></div>'+
                            '</div>'+
                            '<div class="form-group reason">'+
                            '<label for="area">取消缘由：</label>'+
                            '<ul>'+
                            '<li><input type="radio" name="reason" value="1">无法备齐的货物<li>'+
                            '<li><input type="radio"  name="reason" value="2">不是有效的订单<li>'+
                            '<li><input type="radio"  name="reason" value="3">应买家主动要求<li>'+
                            '<li><input type="radio"  id="other" name="reason" value="4">其他的取消原因<li>'+
                            '<li  ><textarea id="otherReasonDesc" style="display:none;" col="20" rows="3"   name="reason"  ></textarea><li>'+
                            '</ul>'+
                            '</div>'+
                            '</form>'+
                            '</div>'+
                            '<div class="modal-footer">'+
                            '<div>'+
                            '<button id="yesCancel" type="button" class="btn- btn-success">保存</button>'+
                            '</div>'+
                            '</div>'+
                            '</div>'+
                            '</div>'+
                            '</div>'+
                            '</td>'+
                            '</tr>'+
                            '</tbody>'+
                            '<tfoot>'+
                            '<tr>'+
                            '<td colspan="6" style="text-align:right;">'+
                            '<span style="margin-right:30px;">运费：'+res.data.list[i].goodsFreight +'元</span><br>'+
                            '订单金额：<span style="color:#f00;font-size:30px;">'+orderAmountYuan +'</span>元 <span style="margin-left:10px;color:#f00;font-size:30px;">'+orderAmountTicket+'</span>券'+
                            '</td>'+
                            '</tr>'+
                            '</tfoot>'+
                            '</table>';
                     }
                     $('#orderdetail').append(html);

                        //订单状态显示
                        var statusDis=$('.statusDis').html();
                            if (statusDis == 1) {
                                $('.statusDis').html('待付款');
                        }if (statusDis == 2) {
                                $('.statusDis').html('待发货');
                        }if (statusDis == 3) {
                                $('.statusDis').html('已发货');
                        }if (statusDis == 4) {
                                $('.statusDis').html('已收货');
                        }if (statusDis == 5) {
                                $('.statusDis').html('待评价');
                        }if (statusDis == 6) {
                                $('.statusDis').html('已评价');
                        }if (statusDis == 7) {
                                $('.statusDis').html('已取消');
                        }if (statusDis == 8) {
                                $('.statusDis').html('退款');
                        }if (statusDis == 9) {
                                $('.statusDis').html('拒收');
                        }if (statusDis == 10) {
                                $('.statusDis').html('延迟收货');
                        }
                       //更多-显示支付方式信息
                       $('.more1').mouseenter(function(){
                            $('.moreInfo').show();
                        }).mouseleave(function(){
                            $('.moreInfo').hide()
                        })

                        //设置发货跳转
                    $('.jump').click(function(){
                        window.location.href = "deliver_set.html?orderDetailId="+ $(this).attr('orderDetailId');
                    })
                     //取消订单
                        $('.removeOrder').click(function(){
                            //获取订单明细id、取消原因id
                            var pageUrls =cncbk_common_tools.serverURL +'/business/order/queryOrderList';
                            var orderDetailId = $('.removeOrder').attr('orderDetailId');
                            data ={
                                'orderDetailId':orderDetailId,
                            }
                            var func = function (res){
                                console.log(res)
                            }
                            ajax(
                                pageUrls,
                                data,
                                func,
                                'post',
                                'json'
                            )
                        })
                        //
                        $('#other').click(function(){
                            $('#otherReasonDesc').show();
                        })
                        //点击保存确定取消订单
                        $('#yesCancel').click(function(){
                            var pageUrls =cncbk_common_tools.serverURL +'/business/order/updateCalcelOrder';
                            var orderDetailId = $('.removeOrder').attr('orderDetailId');//获得订单id
                            var cancelReason = $('[name="reason"]').val();
                            var otherReasonDesc = $('#otherReasonDesc').val();
                            data ={
                                'orderDetailId':orderDetailId,
                                'cancelReason':cancelReason,
                                'otherReasonDesc':otherReasonDesc
                            }
                            var func = function (res){
                            if(res.code==200){
                                $('.close').click();

                            }else{
                                $('.close').click();
                            }
                            }

                            ajax(
                                pageUrls,
                                data,
                                func,
                                'post',
                                'json'
                            )
                        })

                        //物流信息接口
                    if (logappend) {
                        var pageUrls =cncbk_common_tools.serverURL + '/business/order/getOrderExpress';
                            data = {
                                    'orderDetailId':orderDetailId}
                        var func = function(res){
                            var logTd='',orderCueCon='';
                            logTd+=
                                '<td colspan="4"><span>物流公司：<a href="" target="_blank">'+ res.data.expressCompany+'</a></span>'+
                                '<span>物流单号：<span>'+ res.data.expressNumber+'</span></span>'+
                                '<span class="more2" id="logisticsTRack">物流跟踪<i class="glyphicon glyphicon-chevron-down"></i></span>'+
                                '<div class="logisticInfo" >'+
                                '<ul class="logList">'+
                                '</ul>'+
                                '</div>'+
                                '</td>'+
                                '<td colspan="2" class="deliverPrant"><span> 发货人：<span>'+ res.data.storeSellerName+'</span></span>'+
                                '<span  class="more3" >更多<i class="glyphicon glyphicon-chevron-down"></i></span>'+
                                '<div class="deliverInfo">'+
                                '<ul>'+
                                '<li>公司：<span>'+ res.data.storeSellerName+'</span></li>'+
                                '<li>联系电话：<span>'+ res.data.storeTelphone+'</span></li>'+
                                '<li>发货地址：<span>'+ res.data.storeAreaInfo+res.data.storeTelphone+'</span></li>'+
                                '</ul>'+
                                '</div>'+
                                '</td>';

                                $('.orLogInfo').append(logTd);
                                //更多
                                $('.more3').mouseenter(function(){
                                    $('.deliverInfo').show()
                                }).mouseleave(function(){
                                    $('.deliverInfo').hide()
                                })
                                 //物流动态接口
                     var logUrls = cncbk_common_tools.serverURL + '/business/express/getOrderExpress';
                     data={'orderDetailId':orderDetailId}
                     var funLog = function(res){
                        $('.logList').empty();
                        var LogInterface = '';
                        if (res.data.count < 1) {
                            LogInterface +='<li>暂无物流信息</li>';
                            $('.logList').append(LogInterface);
                        }else{
                            for (var s = 0; s < res.data.list.length; s++) {
                            LogInterface +='<li>'+
                                '<span>'+ res.data.list[s].msgTime+'</span>'+
                                '<span>'+ res.data.list[s].content+'</span>'+
                                '<span>'+ res.data.list[s].operator+'</span>'+
                                '</li>';
                            }
                            $('.logList').append(LogInterface); 
                        }
                            //物流跟踪
                            $('#logisticsTRack').mouseenter(function(){
                                console.log(11111)
                                $('.logisticInfo').show()
                            }).mouseleave(function(){
                                $('.logisticInfo').hide()
                            })
                        }
                        ajax(
                            logUrls,
                            data,
                            funLog,
                            'post',
                            'json'
                            )   
                     }
                     ajax(
                         pageUrls,
                         data,
                         func,
                         'post',
                         'json'
                     )
                    }
                    }
                 ajax(
                     pageUrls,
                     data,
                     funs,
                     'post',
                     'json'
                 )
             }
        </script>
</body>
</html>
